<template>
  <div class="treeSelect">
    <el-input
      v-model="query"
      :placeholder="placeholder"
      :disabled="disabled"
      @input="onQueryChanged"
    ></el-input>
    <el-tree
      ref="treeRef"
      style="margin-top: 10px"
      :data="treeDate"
      :props="treeProps"
      :height="height || 300"
      :show-checkbox="showCheckbox"
      :check-strictly="checkStrictly"
      :filter-method="filterMethod"
      :default-expand-all="true"
      :expand-on-click-node="expandOnClickNode"
      :highlight-current="true"
      :current-node-key="currentNodeKey"
      @node-click="handleNodeClick"
    />
  </div>
</template>

<script setup>
import { ref } from "vue";
const props = defineProps({
  currentNodeKey: {
    type: Array,
    default: () => [],
  },
  treeDate: {
    type: Array,
    default: () => [],
  },
  height: {
    type: [Number, String],
    default: 300,
  },
  showCheckbox: {
    type: Boolean,
    default: false,
  },
  checkStrictly: {
    type: Boolean,
    default: false,
  },
  filterData: {
    type: String,
    default: () => "label",
  },
  placeholder: {
    type: String,
    default: () => "请输入内容",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  treeProps: {
    type: Object,
    default: () => ({
      children: "children",
      label: "label",
      value: "label",
    }),
  },
  expandOnClickNode: {
    type: Boolean,
    default: false,
  },
});
const query = ref("");
const treeRef = ref(null);
const onQueryChanged = (query) => {
  treeRef.value.filter(query);
};
const filterMethod = (query, node) => {
  return node[props.filterData].includes(query);
};
const handleNodeClick = (node) => {};
</script>

<style lang="scss" scoped>
.treeSelect {
  height: 100%;
}
:deep() .el-tree {
  height: calc(100% - 40px);
}
:deep() .el-vl__wrapper {
  height: 100%;
}
:deep() .el-vl__window {
  height: 100%;
}
:deep() .el-vl__window > div {
  height: 100%;
}
</style>